<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>sinoare</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <font style="font-weight: bold;">账号信息</font>
        <hr/>
        <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                <span class="x-red">*</span>联系人:
            </label>
            <div class="layui-input-inline">
                <input type="text" id="aname" name="aname" required
                       autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>手机号码:
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" required
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>所在分店:
            </label>
            <div class="layui-input-inline">
                <select style="width: auto;" name="bid">
                    <option value="0">请选择</option>
                    <option th:each="branch : ${branchOffices}" th:text="${branch.bname}" th:value="${branch.bid}">请选择
                    </option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>分配角色:
            </label>
            <div class="layui-input-inline">
                <select style="width: auto;" name="rid">
                    <option value="0">请选择</option>
                    <option th:each="role : ${roles}" th:text="${role.rname}" th:value="${role.rid}">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 300px;">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        /* //自定义验证规则
         form.verify({
           nikename: function(value){
             if(value.length < 5){
               return '昵称至少得5个字符啊';
             }
           }
           ,pass: [/(.+){6,12}$/, '密码必须6到12位']
           ,repass: function(value){
               if($('#L_pass').val()!=$('#L_repass').val()){
                   return '两次密码不一致';
               }
           }
         });*/

        //监听提交
        form.on('submit(add)', function (data) {
            var aname = data.field.aname;
            var phone = data.field.phone;
            var bid = data.field.bid;
            var rid = data.field.rid;

            if (aname == ""){
                layer.msg('请输入联系人！', {time:1000, icon:5, shift:6, offset:['200px', '225px']});
                return false;
            }
            if (phone == ""){
                layer.msg('请输入手机号码！', {time:1000, icon:5, shift:6, offset:['200px', '225px']});
                return false;
            }
            var shoJi = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            if (shoJi.test(phone)) {
                layer.msg('请输入正确的手机号码！', {time:1000, icon:5, shift:6, offset:['200px', '225px']});
                return false;
            }
            if (rid == 0){
                layer.msg('请分配角色！', {time:1000, icon:5, shift:6, offset:['200px', '225px']});
                return false;
            }

            $.ajax({
                url:"/addAccountnumber",
                type: "POST",
                data:{
                    "aname":aname,
                    "phone":phone,
                    "bid":bid,
                    "rid":rid
                },
                success: function (result) {
                    //发异步，把数据提交给php
                    layer.alert("账号为："+result.data.account+
                        "\n密码为："+result.data.account, {icon: 6, title:"增加成功"}, function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                    return false;
                }
            })
        });


    });
</script>
</body>

</html>